﻿import './AnimalShow.css';
import bird from './svg/bird.jpeg';
import cat from './svg/cat.jpeg';
import cow from './svg/cow.jpeg';
import dog from './svg/dog.jpeg';
import gator from './svg/gator.jpeg';
import heart from './svg/heart.jpeg';
import horse from './svg/horse.jpeg';
import {useState} from "react";

const svgMap = {
  bird,
  cat,
  cow,
  dog,
  gator,
  horse,
};


function AnimalShow(props){
    const { type } = props;
    const [clicks,setClicks] = useState(0);
    const handleClick = ()=>{
        setClicks(clicks + 1);
    };

    return (
        <div className={"animal-show"} onClick={handleClick}>
            <img className={"animal"} alt={"animal"} src={svgMap[type]} />
            <img
                className={"heart"}
                alt={"heart"}
                src={heart}
                style={{ width:10 + 10 * clicks + 'px'}}
            />
        </div>
    );
}

export default AnimalShow;